<template>
	<view>
		<view class="box">
			<view class="boximgbox">
				<button type="default" open-type="chooseAvatar" @chooseavatar="chooseavatar">
					<image class="boximg" :src="url" v-if="url" />

					<image class="boximg" src="../../static/my.png" v-else />
				</button>
			</view>
			<view class="boxnr">
				<view class="boxnrz">
					昵称
				</view>
				<input class="boxnry" placeholder="请输入昵称" type="nickname"  v-model="name" @change="namechange">
			</view>
			<view class="boxnr">
				<view class="boxnrz">
					手机号
				</view>
				<button type="default" open-type="getPhoneNumber" @getphonenumber="getPhoneNumbe">
					<input class="boxnry" type="text" placeholder="点击授权手机号" disabled v-model="phone">
				</button>
				<image class="boxnrimg" src="../../static/you.png"></image>
			</view>
			<!-- <button type="default" open-type="getPhoneNumber" @getphonenumber="getPhoneNumbe">获取手机号</button> -->
			<view class="but">
				<view class="butxy">
					<image class="butxyimg" src="../../static/xz1.png" v-if="type" @click="type=!type" />
					<image class="butxyimg" src="../../static/xz2.png" v-if="!type" @click="type=!type" />
					阅读并同意
					《 <span class="span">用户服务协议</span> 》
					《 <span class="span">隐私政策</span>》
				</view>
				<view class="butbut" @click="login">
					确认
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: false,
				name: '',
				phone: '',
				url: ''
			};
		},
		methods: {
			login() {
				console.log('type', this.type);
				console.log('name', this.name);
				console.log('phone', this.phone);
				console.log('url', this.url);
			},
			getPhoneNumbe(e) {
				console.log(e) // 动态令牌
				console.log(e.detail.code) // 动态令牌
			},
			chooseavatar(e) {
				console.log(e) // 头像
				console.log(e.detail.avatarUrl) // 头像
				this.url = e.detail.avatarUrl
			},
			namechange(e){
				console.log(e) // 昵称
				this.name = e.detail.value
			}
		}
	}
</script>

<style lang="less" scoped>
	button {
		width: 100%;
		height: 100%;
		margin: unset;
		background-color: #fff;
	}

	button:after {
		border: unset;
	}

	.box {
		background-color: #ffffff;
		padding: 30rpx;

		.boximgbox {
			width: 100%;
			text-align: center;
			padding: 94rpx 0 72rpx;
			margin-bottom: 32rpx;

			.boximg {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}

			border-bottom: 1px solid #eeeeee;
		}

		.boxnr {
			display: flex;
			justify-content: center;
			align-items: center;
			padding-bottom: 32rpx;
			margin-bottom: 32rpx;
			border-bottom: 1px solid #eeeeee;

			.boxnrz {
				width: 150rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;

			}

			.boxnry {
				width: 100%;
				height: 100%;
				flex: 1;
				text-align: left;
				font-size: 28rpx;
			}

			.boxnrimg {
				width: 16rpx;
				height: 30rpx;
			}
		}
	}

	.but {
		position: fixed;
		bottom: 75rpx;
		left: 0;
		width: 750rpx;

		.butxy {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
			font-weight: 400;
			color: #000000;
			margin-bottom: 40rpx;

			.butxyimg {
				width: 30rpx;
				height: 30rpx;
				margin-right: 18rpx;
			}

			.span {
				color: #3097FF;
			}
		}

		.butbut {
			margin: 0 auto;
			width: 480rpx;
			height: 88rpx;
			background: linear-gradient(0deg, #206cf6 0%, #4d84f9 100%), #f1f1f1;
			border-radius: 44rpx;
			font-size: 30rpx;
			font-weight: 400;
			text-align: center;
			color: #ffffff;
			line-height: 88rpx;
		}
	}
</style>